<template>
  <link rel="stylesheet" href="/assets/css/profile.css" />
  <div class="user">
    <div class="user-image">
      <img :src="business.avatar_text" />
    </div>
  </div>
  <!-- /表单结构 -->
  <van-form @submit="profile">
    <!-- 昵称 -->
    <van-field
      v-model="business.nickname"
      name="nickname"
      label="昵称"
      placeholder="请输入昵称"
      :rules="[{ required: true, message: '请输入昵称' }]"
    />
    <!-- 手机号码 -->
    <van-field
      v-model="business.mobile"
      name="mobile"
      label="手机号"
      placeholder="请输入手机号"
      :rules="[
        { required: true, message: '请输入手机号码' },
        {
          patten: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
          message: '邮箱格式不正确',
        },
      ]"
    />
    <!-- 邮箱 -->
    <van-field
      v-model="business.email"
      name="email"
      label="邮箱"
      placeholder="请输入邮箱"
      :rules="[
        { required: true, message: '请输入邮箱' },
        {
          pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
          message: '邮箱格式不正确',
        },
      ]"
    />
    <!-- 密码 -->
    <van-field
      v-model="business.password"
      type="password"
      name="password"
      label="密码"
      placeholder="请输入密码"
    />
    <!-- 性别 -->
    <van-field name="gender" label="性别">
      <template #input>
        <van-radio-group v-model="business.gender" direction="horizontal">
          <van-radio name="0">保密</van-radio>
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <!-- 地区 -->
    <van-field
      name="region"
      v-model="business.region_text"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <!-- 弹出组件 -->
    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
        v-model="code"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>

    <!-- 头像上传 -->
    <van-field name="avatar" label="文件上传">
      <template #input>
        <van-uploader v-model="avatar" :max-count="1" />
      </template>
    </van-field>

    <div style="width:50%;margin:20px auto">
      <van-button
        round
        block
        :loading = "loading"
        type="primary"
        native-type="submit"
        color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
      >
        提交信息
      </van-button>
    </div>
  </van-form>
</template>
<script setup>
import { useCascaderAreaData } from "@vant/area-data";

const { proxy } = getCurrentInstance();

//地区
const options = useCascaderAreaData();

//控制弹出框显示
const show = ref(false);

const business = proxy.$business.value;

//地区码
const code = ref(business.district || business.city || business.province);

//头像
const avatar = ref([{ url: business.avatar_text }]);



//提交状态
let loading = ref(false)

const onFinish = ({ selectedOptions }) => {
  show.value = false;
  business.region_text = selectedOptions.map((option) => option.text).join("-");
  code.value = selectedOptions.map((option) => option.value).pop();
};

const profile =async (values) => {
  loading.value = true

  //组装数据
  var params = {
    id:business.id,
    nickname: values.nickname,
    mobile:values.mobile,
    gender:values.gender,
    email:values.email
  }

  //密码
  if(values.password){
    params.password = values.password
  }

  //地区码
  if(code.value){
    params.code = code.value
  }

  //头像
  if(values.avatar[0].file){
    params.avatar = values.avatar[0].file
  }

  //调用接口，发送请求
  if(params.avatar){
    var result = await proxy.$UPLOAD({
      url:'business/profile',
      params
    })
  }else{
    var result = await proxy.$POST({
      url:'business/profile',
      params
    })
  }

  //修改提交状态
  loading.value = false
  if(result.code == 0){
    //提交失败，留在本页面  
    proxy.$fail(result.msg);
    return false
  }else if(result.code == 1){
    //提交成功，跳转到用户中心
    proxy.$success({
      message:result.msg,
      duration:1000,
      onClose:()=>{
        proxy.$router.go(-1)
      }
    })
    
  }

};
</script>